<template>
	<div class="all">
		<div class="left">
			<left></left>
		</div>
		<div class="right">
			<div class="top">
				<top></top>
			</div>
			<div class="content">
				<div class="flexb">
					<div class="flex">
						<el-input v-model="search.person" style="width: 150px; margin-right: 10px;" placeholder="操作账号"></el-input>
						<el-input v-model="search.phone" style="width: 150px; margin-right: 10px;" placeholder="手机号"></el-input>
						<el-button type="warning" @click="searchs">搜索</el-button>
					</div>
				</div>

				<div class="table">
					<el-table :data="tableData" border style="width: 100%">
						<el-table-column label="操作账号">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.person }}</span>
							</template>
						</el-table-column>
						<el-table-column label="手机号">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.phone }}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作人">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.acount }}</span>
							</template>
						</el-table-column>
						<el-table-column label="时间">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.time }}</span>
							</template>
						</el-table-column>
						<el-table-column label="评论">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.comment }}</span>
							</template>
						</el-table-column>
						<el-table-column label="余额变动">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.old_value }}->{{scope.row.new_value}}</span>
							</template>
						</el-table-column>

						<!-- <el-table-column label="操作时间">
							<template slot-scope="scope">
								<el-button type="text">修改余额</el-button>
								<el-button type="text">查看缴费记录</el-button>
								<el-button type="text">修改账号信息</el-button>
							</template>
						</el-table-column> -->
					</el-table>
					<el-pagination style="text-align: right; padding: 20px;" background layout="total,prev, pager, next" :current-page="page"
					 @current-change="fanye" :page-size="page_size" :total="total"></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	export default {
		name: 'yonghuyue',
		components: {
			left,
			top
		},
		data() {
			return {
				search: {
					person: "",
					phone: ""
				},
				log: false,
				page: 1,
				page_size: 20,
				total: 0,
				loading: false,
				tableData: []
			}
		},
		created() {
			this.getlist()
		},
		methods: {
			searchs:function(){
				this.page = 1
				this.loading = true
				this.getlist()
			},
			//翻页
			fanye: function(page) {
				this.loading = true
				this.page = page
				this.getlist()
			},
			//获取列表
			getlist: function() {
				this.axios.get(this.url+`/work/userManager/recordList?pageNo=${this.page}&pageSize=${this.page_size}&phone=${this.search.phone}&person=${this.search.person}`)
					.then(response => {
						console.log(response)
						if (response.data.success == true) {
							this.tableData = response.data.result.records
							this.total = response.data.result.total
							this.loading = false
						} else {
							this.$message.error(response.data.message);
						}
					})
					.catch(response => {
						if (response.response.status == 401) {
							this.$router.push({
								path: '/login'
							})
						}
					});
			},
		},

	}
</script>

<style scoped lang="less">
	.all {
		display: flex;
		height: 100vh;

		.left {
			width: 200px;
			height: 100%;
			background: #414652;
			box-shadow: 0 2px 10px #2D3038;
		}

		.right {
			width: calc(100% - 180px);
			height: 100%;
			overflow: auto;

			.content {
				padding: 20px;

				.table {
					margin-top: 20px;
				}
			}
		}
	}
</style>
